<template>
	<main class="home">
		<kui-header :title="`more`">
			<span slot="header-left"></span>
			<span slot="header-right"></span>
		</kui-header>
		<swiper :options="swiperOption" ref="mySwiper">
			<swiper-slide v-for="item in swiperData">
				<router-link :to="item.url" class="icon">
					<i class="Kui" :class="item.className"></i>
					<p>{{ item.name }}</p>
				</router-link>
			</swiper-slide>
		</swiper>
	</main>
</template>

<script>
	export default {
		name: "more",
		data() {
			return {
				swiperOption: {
					slidesPerView: 4,
					slidesPerColumn: 2,
					spaceBetween: 30,
				},
				swiperData:[
					{url:'/more/swiper',name:'轮播',className:'Kui-lunboxiaoguo'},
					{url:'/more',name:'暂无',className:'Kui-zanwushuju'},
					{url:'/more',name:'暂无',className:'Kui-zanwushuju'},
					{url:'/more',name:'暂无',className:'Kui-zanwushuju'},
					{url:'/more',name:'暂无',className:'Kui-zanwushuju'},
					{url:'/more',name:'暂无',className:'Kui-zanwushuju'},
					{url:'/more',name:'暂无',className:'Kui-zanwushuju'},
					{url:'/more',name:'暂无',className:'Kui-zanwushuju'},
					{url:'/more',name:'暂无',className:'Kui-zanwushuju'},
					{url:'/more',name:'暂无',className:'Kui-zanwushuju'},
					{url:'/more',name:'暂无',className:'Kui-zanwushuju'},
					{url:'/more',name:'暂无',className:'Kui-zanwushuju'},
					{url:'/more',name:'暂无',className:'Kui-zanwushuju'},
					{url:'/more',name:'暂无',className:'Kui-zanwushuju'},
					{url:'/more',name:'暂无',className:'Kui-zanwushuju'},
					{url:'/more',name:'暂无',className:'Kui-zanwushuju'},
					{url:'/more',name:'暂无',className:'Kui-zanwushuju'},
					{url:'/more',name:'暂无',className:'Kui-zanwushuju'},
					{url:'/more',name:'暂无',className:'Kui-zanwushuju'},
					{url:'/more',name:'暂无',className:'Kui-zanwushuju'},
					{url:'/more',name:'暂无',className:'Kui-zanwushuju'},
				]
			}
		}
	}
</script>

<style scoped lang="scss">
	/deep/ .icon{
		display: block;
		padding: 20px 10px;
		text-align: center;
		align-items: center;
	}
</style>